<template>
	<view>
		<view class="wrap">
			<view class="u-tabs-box">
				<u-tabs-swiper activeColor="#f29100" ref="tabs" :list="list" :current="current" @change="change" :is-scroll="false" swiperWidth="750"></u-tabs-swiper>
			</view>
			<u-empty text="当前没有预约" mode="list" v-if="orderList.length===0"></u-empty>
			<swiper class="swiper-box" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;">
						<view class="page-box">
							<view v-for="(item, index) in orderList" :key="item.id" style="display: flex;">
								<view class="item u-border-bottom" >
									<image mode="aspectFill" :src="item.img" />
									<!-- 此层wrap在此为必写的，否则可能会出现标题定位错误 -->
									<view class="title-wrap">
										<text class="rc-text" :style="{color:'black'}" >{{ `${item.brand}  ${item.code}` }}</text>
										<view style="display: flex;margin-top: 28rpx;color: #acacac;">
											{{item.type}}
											<u-line color="red" direction='col' margin='10rpx'/>
											{{item.gear}}
											<u-line color="red" direction='col' margin='10rpx'/>
											{{item.seat+'座'}}
											<u-line color="red" direction='col' margin='10rpx'/>
											{{item.tank+'L'}}
											<u-line color="red" direction='col' margin='10rpx'/>
										</view>
									</view>
								</view>
								<view class="rc-btn">
									<view class="rc-btn-text" @click="cancelOrder(item.id)">取消</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
			<u-toast ref="uToast" />
		</view>
	</view>
</template>

<script>
import SET from '@/SET.js'
export default {
	data() {
		return {
			baseUrl: SET.baseUrl,
			list: [
				{
					name: '已预约'
				}
			],
			current: 0,
			swiperCurrent: 0,
			dataList:[],
			orderList:[],
			historyList:[],
		}
	},
	onShow() {
		let model = {}
		model.userId = this.$store.state.userInfo.id
		this.$api.getCar(model).then(res=>{
			this.dataList = res.result.records.map(item=>{
				item.img = this.baseUrl + item.imgs.split(',')[0]
				return item
			})
			this.orderList = this.dataList.filter(item=>item.status === '已预约')
		})
	},
	computed: {
	},
	methods: {
		cancelOrder(id) {
			this.$api.cancelRent({
				id:id
			}).then(res => {
				this.$refs.uToast.show({
					title: '操作成功',
					type: 'success',
					callback(){
						uni.switchTab({
							url: '/pages/user/my/my'
						})
					}
				})
			})
		},
		// tab栏切换
		change(index) {
			this.swiperCurrent = index
		},
		transition({ detail: { dx } }) {
			this.$refs.tabs.setDx(dx)
		},
		animationfinish({ detail: { current } }) {
			this.$refs.tabs.setFinishCurrent(current)
			this.swiperCurrent = current
			this.current = current
		}
	}
}
</script>

<style>
/* #ifndef H5 */
page {
	height: 100%;
	background-color: #f2f2f2;
}
/* #endif */
</style>

<style lang="scss" scoped>
	.rc-btn-text{
		position: absolute;
		top: 40%;
		left: 37%;
		color: white;
	}
	.rc-btn{
		width: 90px;
		height: 80px;
		background: #F29100;
		position: relative;
	}
	.rc-text{
		font-size: 32rpx;
		font-weight: bold;
	}
	
	.item {
		display: flex;
		padding: 20rpx;
		background-color: white;
		width: 563rpx;
	}

	image {
		width: 120rpx;
		flex: 0 0 120rpx;
		height: 120rpx;
		margin-right: 20rpx;
		border-radius: 12rpx;
	}

	.title {
		text-align: left;
		font-size: 28rpx;
		color: $u-content-color;
		margin-top: 20rpx;
	}
.wrap {
	display: flex;
	flex-direction: column;
	height: calc(100vh - var(--window-top));
	width: 100%;
}
.swiper-box {
	flex: 1;
}
.swiper-item {
	height: 100%;
}
</style>
